<template>
   <div class="my" :style="{minHeight:$store.state.minHeight+'rem'}">
      <header>
         <!--    头像用户信息部分     -->
         <div class="my_headimg" @click="login">
            <img class="my_headimg_1" :src="$store.state.userInfo.avatar" alt="">
            <div class="my_userinfo">
               <p style="font-size: .14rem">{{$store.state.userInfo.nickname}}</p>
               <p style="font-size: .09rem">用户ID: {{$store.state.userInfo.username}}</p>
            </div>
            <img class="my_settingImg" src="../../assets/img/shezhi.png" alt="" @click.stop="setUp">
         </div>
         <!--    积分浏览记录等部分      -->
         <div class="my_integral">
            <div class="my_integral_box"  @click="jump('IntegralRecord','积分')">
               <p style="font-size: .17rem;margin-bottom: .03rem">{{this.$store.state.userInfo.score}}</p>
               <p style="font-size: .13rem">积分</p>
            </div>
            <div class="my_integral_box"  @click="jump('myShopCollection','商品收藏')">
               <p style="font-size: .17rem;margin-bottom: .03rem">{{this.$store.state.userInfo.collect_goods}}</p>
               <p style="font-size: .13rem">商品收藏</p>
            </div>
            <div class="my_integral_box"  @click="jump('myDianPuCollection','店铺收藏')">
               <p style="font-size: .17rem;margin-bottom: .03rem">{{this.$store.state.userInfo.collect_manystore}}</p>
               <p style="font-size: .13rem">店铺收藏</p>
            </div>
            <div class="my_integral_box"  @click="jump('myShopCollection','浏览记录')">
               <p style="font-size: .17rem;margin-bottom: .03rem">{{this.$store.state.userInfo.browse}}</p>
               <p style="font-size: .13rem">浏览记录</p>
            </div>
         </div>
         <!--    余额      -->
         <div class="my_balance">
            <div class="my_balance_money">
               <img src="../../assets/img/balanceIcon.png" alt="">
               <p style="font-size: .13rem">我的余额: {{$store.state.userInfo.money}}</p>
            </div>
            <router-link tag="div" to="/views/Client/recharge" class="recharge">立即充值</router-link>
         </div>
      </header>
      <section>
         <!--    我的订单部分  -->
         <div class="my_order">
            <div class="my_orderTitle" @click="jump('myOrder')">
               <div>我的订单</div>
               <div class="look-allorder"><span>查看全部订单</span><img src="../../assets/img/youjiantou.png" alt=""></div>
            </div>
            <!--          功能图标部分  -->
            <div class="my_funWrap">
               <div class="my_funBox" v-for="x in myFunction" @click="jump(x.page)">
                  <img :src="x.url" alt="">
                  <p>{{x.text}}</p>
               </div>
            </div>
         </div>
         <!--        我的优惠券地址部分  -->
         <div class="my_address">
            <div class="my_address-tit">常用服务</div>
            <div class="my_addressBoxWrap">
               <div class="my_addressBox" v-for="x in myFunction2" @click="jump(x.page)">
                  <img :src="x.url" alt="">
                  <span>{{x.text}}</span>
               </div>
            </div>
         </div>
      </section>
      <router-view></router-view>
   </div>
</template>

<script>
    export default {
        name: "my",
        data() {
            return {
                myFunction: [
                    {
                        url: '../../../static/img/my_1.png',
                        text: '待付款',
                        page: 'order/ToBePaid'
                    }, {
                    url: '../../../static/img/my_2.png',
                    text: '待配送',
                    page: 'order/ToBeDelivered'
                }, {
                    url: '../../../static/img/my_3.png',
                    text: "待收货",
                    page: 'order/delivery'
                }, {url: '../../../static/img/my_4.png', text: "已完成", page: 'order/completed'},
                    {
                        url: '../../../static/img/my_5.png',
                        text: "待评价",
                        page: 'order/orderEvaluate'
                    }, {url: '../../../static/img/indexmy001.png', text: "全部", page: 'order/orderAll'}], // 功能部分1
                myFunction2: [{
                    url: '../../../static/img/my_6.png',
                    text: '我的优惠券',
                    page: 'coupon'
                }, {
                    url: '../../../static/img/my_7.png',
                    text: "我的地址",
                    page: 'myAddress'
                }, {
                    url: '../../../static/img/indextg001.png',
                    text: "推广中心",
                    page: 'PromotionCenter'
                }, {
                    url: '../../static/img/woyaohezuo.png',
                    text: "我要合作",
                    page: 'wantToCooperate'
                }, {
                    url: '../../static/img/indextz001.png',
                    text: "消息通知",
                    page: 'myMsgNotification'
                }, {url: '../../../static/img/my_8.png', text: "常见问题", page: 'problem'}],
            }
        },
        created() {

        },
        methods: {
            jump(page, data = '') {
                this.$router.push({
                    name: page,
                    query: {
                        data
                    }
                })
            },
            setUp() {
              if (this.$myStorage.query()) {
                  this.$router.push({
                      name:'setUp'
                  })
              }else{
                  this.$myNotice('请先登录!',1500)
              }
            },
            login(){
                if(this.$myStorage.query()){
                    return
                }else {
                    this.$router.push({
                        name:'login'
                    })
                }
            }
        }
    }
</script>

<style scoped>
   .my {
      background-color: #E5E5E5;
   }

   .my header {
      width: 100%;
      box-sizing: border-box;
      padding: .7rem .1rem .1rem .1rem;
      background: linear-gradient(90deg, rgba(255, 142, 65, 1) 0%, rgba(255, 110, 0, 1) 100%);
      border-radius: 4rem/.45rem;
      position: relative;
      left: 0;
      top: -.3rem;
      overflow: hidden;
   }

   /* 头像部分 */
   .my_headimg {
      width: 100%;
      height: .46rem;
      display: flex;
      justify-content: start;
      position: relative;
      margin-bottom: .15rem;
   }

   /* 用户头像 */
   .my_headimg_1 {
      width: .46rem;
      border-radius: 100%;
   }

   /* 用户信息 */
   .my_userinfo {
      height: 100%;
      width: 100%;
      margin-left: .15rem;
      display: flex;
      flex-flow: column;
      justify-content: space-around;
      color: #ffffff;
   }

   .my_userinfo p {
      margin: 0;
   }

   /* 设置 */
   .my_settingImg {
      width: .2rem;
      height: .2rem;
      position: absolute;
      top: 0;
      right: .05rem;
   }

   /* 积分浏览记录等部分 */
   .my_integral {
      width: 100%;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .15rem;
   }

   .my_integral_box {
      width: calc(100% / 5);
      color: #ffffff;
      text-align: center;
   }

   /* 余额部分 */
   .my_balance {
      background: linear-gradient(180deg, rgba(38, 38, 38, 1) 0%, rgba(125, 125, 125, 1) 100%);
      border-radius: .1rem;
      color: #FFCA92;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
      height: .5rem;
      position: relative;
      top: .1rem;
      /*box-sizing: border-box;*/
      padding: .02rem 0 .03rem 0;
   }

   .my_balance div:nth-child(2) {
      text-align: left;
      margin-left: .1rem;
   }

   .my_balance_money {
      display: flex;
      flex-flow: row;
      justify-content: space-around;
      align-items: center;
      box-sizing: border-box;
      padding: 0 .05rem;
   }

   .my_balance_money img {
      width: .12rem;
      height: .12rem;
      margin-right: .05rem;
   }

   /* 充值按钮 */
   .recharge {
      width: .65rem !important;
      border-radius: .15rem;
      border: .01rem solid rgba(255, 205, 150, 1);
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: center;
      font-size: .11rem;
      line-height: .23rem;
      height: .23rem;
      margin-right: .3rem;
   }

   /* 内容块 */
   .my section {
      width: 100%;
      min-height: 4rem;
      box-sizing: border-box;
      padding: .15rem .13rem;
      position: relative;
      top: -.3rem;
   }

   .my_order {
      background-color: #ffffff;
      border-radius: .1rem .1rem .1rem .1rem;
      box-sizing: border-box;
      padding: .13rem 0;
   }

   .my_orderTitle {
      width: 100%;
      display: flex;
      box-sizing: border-box;
   }

   .my_orderTitle div {
      width: 50%;
   }

   .my_orderTitle div:nth-child(1) {
      font-size: .16rem;
      color: #282828;
      font-family: SourceHanSansCN;
      font-weight: 500;
      box-sizing: border-box;
      padding-left: .15rem;
   }

   .look-allorder {
      box-sizing: border-box;
      padding-right: .1rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      text-align: right;
   }

   .look-allorder span {
      font-size: .09rem;
      color: #555555;
   }

   .look-allorder img {
      width: .15rem;
      height: .15rem;
      margin-left: .05rem;
   }

   /* 我的功能部分 */
   .my_funWrap {
      width: 100%;
      margin-top: .1rem;
      padding-top: .15rem;
      border-top: .02rem solid rgba(229, 229, 229, .8);
      display: flex;
      justify-content: space-between;
   }

   .my_funBox {
      width: calc(100% / 5);
      display: flex;
      flex-flow: column;
      justify-content: space-around;
      align-items: center;
   }

   .my_funBox img {
      width: .25rem;
      height: .25rem;
      margin-bottom: .05rem;
   }

   .my_funBox p {
      width: 100%;
      text-align: center;
      color: #282828;
      font-size: .12rem;
   }

   /* 我的地址等部分 */
   .my_address {
      width: 100%;
      background-color: #ffffff;
      border-radius: .1rem .1rem .1rem .1rem;
      margin-top: .15rem;
      box-sizing: border-box;
      padding: 0 .15rem;
   }

   .my_addressBoxWrap {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      justify-content: flex-start;
   }

   .my_address-tit {
      height: .5rem;
      line-height: .5rem;
      font-size: .16rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #282828;
   }

   .my_addressBox {
      width: 25%;
      height: .5rem;
      position: relative;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .15rem;
   }

   .my_addressBox:last-of-type {
      border: none;
   }

   .my_addressBox img {
      width: .26rem;
      max-height: .26rem;
   }

   .my_addressBox span {
      font-size: .12rem;
      color: #282828;
   }

</style>
